<template>
    <div class="y-icons d-flex">
        <span v-for="item in items.slice(0, slice)" @click="console.log(item)">
            <v-tooltip location="top start">
                <template v-slot:activator="{ props }">
                    <!-- <span v-bind="props">{{ i.name }}</span> -->
                    <VImg alt="chainingview" class="seo-font" v-bind="props"  :src="getCoinImg(item)"></VImg>
                </template>
                <Tip :item="item" :show="true" :total="total"></Tip>
            </v-tooltip>
            <!-- <VImg :src="tokens.getImg(item)"></VImg> -->
        </span>
        <span v-if="items.length > slice">...</span>
    </div>
</template>
<script setup lang="ts">
import { useTokens } from "@/stores/tokens";
import Tip from "./tip.vue";
const tokens = useTokens();
const getCoinImg = (item:any)=>{
    let t = tokens.getImg(item.symbol);
    if(t){
        return t;
    }
    t = tokens.getImgByHash(item.contractAddress);
    if(t){
        return t;
    }
}
defineProps({
    slice: {
        type: Number,
        default: 3
    },
    urls: {
        type: Array<string>,
        default: ["", "", "", ""]
    },
    items: {
        type: Array<any>,
        default: []
    },
    total: {
        type: Number
    }
});
</script>
<style scoped lang="less">
.y-icons {
    /* background-color: royalblue; */
    span {
        margin-left: 4px;

        &:first-child {
            margin-left: 0px;
        }
    }

    .v-img {
        width: 16px;
        height: 16px;
        -webkit-user-drag: none;
    }
}
</style>
